<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>asmSelect Example 2: Modifying the select from jQuery</title>
	<meta name="description" content="This example demonstrates how you can modify the contents of the select, and how you should trigger a change() event on the select after you have modified it." />

	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery.ui.js"></script>
	<script type="text/javascript" src="../jquery.asmselect.js"></script>

	<script type="text/javascript">

		$(document).ready(function() {

			$("#cities").asmSelect({
				animate: true,
				highlight: true,
				sortable: true
			});

			$("#add_city_btn").click(function() {

				var city = $("#add_city").val();
				var $option = $("<option></option>").text(city).attr("selected", true); 

				$("#cities").append($option).change();
				$("#add_city").val('');

				return false; 
			}); 
			
		}); 

	</script>

	<link rel="stylesheet" type="text/css" href="../jquery.asmselect.css" />
	<link rel="stylesheet" type="text/css" href="example.css" />

</head>
<body>

	<h1>Example 2: Modifying the select from jQuery</h1>
	
	<h3>
	This example demonstrates how you can modify the contents of the select, and how you should 
	trigger a change() event on the select after you have modified it.
	</h3>

	<form action="./example_results.php" method="post">

		<label for="cities">what are your favorite cities?</label>
		<select id="cities" multiple="multiple" name="cities[]" title="Please Select">
                        <option>Amsterdam</option>      
                        <option selected="selected">Atlanta</option>
                        <option selected="selected">Baltimore</option>
                        <option>Boston</option>
                        <option>Buenos Aires</option>
                        <option>Calgary</option>
                        <option selected="selected">Chicago</option>
                        <option>Denver</option>
                        <option>Dubai</option>
                        <option>Frankfurt</option>
                        <option>Hong Kong</option>
                        <option>Honolulu</option>
                        <option>Kuala Lumpur</option>
                        <option>London</option>
                        <option>Los Angeles</option>
                        <option>Melbourne</option>
                        <option>Mexico City</option>
                        <option>Miami</option>
                        <option>Minneapolis</option>
                        <option>Montreal</option>
                        <option>New York City</option>
                        <option>Paris</option>
                        <option>Philadelphia</option>
                        <option>Rotterdam</option>
                        <option>San Diego</option>
                        <option>San Francisco</option>
                        <option>Sao Paulo</option>
                        <option>Seattle</option>
                        <option>Seoul</option>
                        <option>Shanghai</option>
                        <option>Singapore</option>
                        <option>Sydney</option>
                        <option>Tokyo</option>
                        <option>Toronto</option>
                        <option>Vancouver</option>
                        <option selected="selected">Washington, DC</option>
		</select>

		<p><em>You may click and drag cities to order of preference.</em></p>

	</form>

	<p>
		<label for="add_city">add a city?</label>
		<input type="text" id="add_city" value="" />
		<button type="button" id="add_city_btn" href="#">add</button>
	</p>

	<ul id='footer'>
		<li><a href="http://code.google.com/p/jquery-asmselect/">asmSelect homepage at Google Code</a></li>
		<li><a href="http://www.ryancramer.com/journal/entries/select_multiple/">Article: Select multiple form fields - Finding a better solution</a></li>
	</ul>

	<p class="copyright">&copy; 2008 by <a href="http://www.ryancramer.com">Ryan Cramer</a></p>

</body>
</html>
